<template>
  <el-form
    label-width="60px"
    ref="baseForm"
    :model="loginFrom"
    :rules="loginRules"
  >
    <el-form-item label="姓名" prop="username">
      <el-row>
        <el-col :span="24">
          <el-input
            prefix-icon="user"
            v-model="loginFrom.username"
            placeholder="请输入账号"
          ></el-input>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-row>
        <el-col :span="24">
          <el-input
            show-password
            prefix-icon="lock"
            v-model="loginFrom.password"
            placeholder="请输入密码"
          ></el-input>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item label="手机" prop="phone">
      <el-row>
        <el-col :span="24">
          <el-input
            prefix-icon="Iphone"
            v-model="loginFrom.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item label="邮箱" prop="email">
      <el-row>
        <el-col :span="24">
          <el-input
            prefix-icon="MostlyCloudy"
            v-model="loginFrom.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="性别">
      <el-row>
        <el-col :span="24">
          <el-radio-group v-model="loginFrom.radio" size="large">
            <el-radio-button label="1">男</el-radio-button>
            <el-radio-button label="0">女</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item lable="职位" prop="value">
      <el-select
        v-model="loginFrom.value"
        placeholder="请选择职位"
      >
        <el-option
          v-for="item in gridData"
          :key="item.roleId"
          :label="item.role"
          :value="item.roleId"
        />
      </el-select>
    </el-form-item>

    <el-button
      v-if="userData == null"
      class="button"
      type="success"
      @click="register"
      >确定</el-button
    >
    <el-button
      v-else-if="userData != null"
      class="button"
      type="success"
      @click="changeMessage"
      >修改</el-button
    >
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      loginFrom: {
        username: this.userData ? this.userData.userName : "",
        password:"",
        email: this.userData ? this.userData.email : "",
        value: this.userData ? this.userData.roleId :"",
        phone: this.userData ? this.userData.phone : "",
        radio: this.userData ? this.userData.sex : 1,
        userId: this.userData ? this.userData.userId : "",
      },

      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的姓名" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
          {
            pattern: "^[A-Za-z0-9]{6,12}$",
            message: "密码必须有英文和数字组成，长度6-12",
          },
        ],
        phone: [
          { required: true, trigger: "blur", message: "请输入手机号" },
          { pattern: "^1[3-9]\\d{9}$", message: "请输入正确的手机号" },
        ],
        email: [
          { required: false, trigger: "blur", message: "请输入邮箱" },
          {
            pattern: "^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$",
            message: "请输入正确的邮箱格式",
          },
        ],
        value: [{ required: true, trigger: "blur", message: "请输选择职位" }],
      },
    };
  },
  methods: {
    register() {
      this.$refs.baseForm.validate((valid) => {
        if (!valid) {
          // this.$message.warning("你还有信息没填哟");
          return false;
        }
      });
      this.axios({
        method: "post",
        url: "/api/admin/register",
        data: {
          userName: this.loginFrom.username,
          password: this.loginFrom.password,
          phone: this.loginFrom.phone,
          email: this.loginFrom.email,
          roleId: this.loginFrom.value,
          sex: this.loginFrom.radio,
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            location.reload();
            ElMessage({
              showClose: true,
              message: "添加成功",
              type: "success",
            });
          }
          if (res.data.code == 400) {
            ElMessage({
              showClose: true,
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((res) => {
          ElMessage({
            showClose: true,
            message: "系统异常",
            type: "success",
          });
        });
    },
    changeMessage() {
      this.$refs.baseForm.validate((valid) => {
        if (!valid) {
          // this.$message.warning("你还有信息没填哟");
          return false;
        }
      });
      this.axios({
        method: "put",
        url: "/api/user/updateUser",
        data: {
          userName: this.loginFrom.username,
          password: this.loginFrom.password,
          phone: this.loginFrom.phone,
          email: this.loginFrom.email,
          roleId: this.loginFrom.value,
          sex: this.loginFrom.radio,
          userId: this.loginFrom.userId,
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            location.reload();
            ElMessage({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
          }
          if (res.data.code == 400) {
            ElMessage({
              showClose: true,
              message: res.data.msg,
              type: "error",
            });
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
  },
  created() {},
  props: ["gridData", "userData"],
  watch: {
    userData(newdata, oldData) {
      this.loginFrom.username = newdata.userName;
      this.loginFrom.password = newdata.password;
      this.loginFrom.phone = newdata.phone;
      this.loginFrom.email = newdata.email;
      this.loginFrom.radio = newdata.sex;
    },
  },
};
</script>

<style>
</style>